<template>

    <div>

        <lar-ui-plane>
            <lar-field-input v-model="action" ></lar-field-input>


             <lar-ui-tutorial>
                 <template slot="header">
                    值:{{input}}
                 </template>
                 <lar-field-input v-model="input" :action="action"></lar-field-input>
                 <template slot="code">
                     <code v-text='`
                        <lar-field-input v-model="input" :action="action"></lar-field-input>
                     `'></code>
                 </template>
             </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{img}} <br /> 上传单图
                </template>
                <lar-field-image v-model="img" :action="action" :data="imgData"></lar-field-image>
                <template slot="code">
                    <code v-text='`
                     <lar-field-image v-model="img" :action="action" :data="imgData"></lar-field-image>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{imgs}} <br /> 上传多图
                </template>
                <lar-field-image fieldMulti="true" v-model="imgs" :action="action" :data="imgData" ></lar-field-image>
                <template slot="code">
                    <code v-text='`
                        <lar-field-image fieldMulti="true" v-model="imgs" :action="action" :data="imgData" ></lar-field-image>
                     `'></code>
                </template>
            </lar-ui-tutorial>



            <lar-ui-tutorial>
                <template slot="header">
                    值:{{time}}
                </template>
                <lar-field-timestamp v-model="time" :action="action"></lar-field-timestamp>
                <template slot="code">
                    <code v-text='`
                        <lar-field-timestamp v-model="time" :action="action"></lar-field-timestamp>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <!--时间筛选相关-->
            <lar-ui-tutorial>
                <template slot="header">
                    值:{{timestamp}}
                </template>
                <lar-field-time v-model="timestamp" :action="action"></lar-field-time>
                <template slot="code">
                    <code v-text='`
                        <lar-field-time v-model="timestamp" :action="action"></lar-field-time>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{datetime}}
                </template>
                <lar-field-datetime v-model="datetime" :action="action"></lar-field-datetime>
                <template slot="code">
                    <code v-text='`
                        <lar-field-datetime v-model="datetime" :action="action"></lar-field-datetime>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{date}}
                </template>
                <lar-field-date v-model="date" :action="action"></lar-field-date>
                <template slot="code">
                    <code v-text='`
                        <lar-field-date v-model="date" :action="action"></lar-field-date>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{imgurl}} <br />用来显示远程图标的
                </template>
                <lar-field-imgurl v-model="imgurl" :action="action"></lar-field-imgurl>
                <template slot="code">
                    <code v-text='`
                        <lar-field-imgurl v-model="imgurl" :action="action"></lar-field-imgurl>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{boole}} <br />用来显示远程图标的
                </template>
                <lar-field-checkbox v-model="boole" :action="action"></lar-field-checkbox>
                <template slot="code">
                    <code v-text='`
                        <lar-field-checkbox v-model="boole" :action="action"></lar-field-checkbox>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{boole}} <br />普通下拉
                </template>
                <lar-field-select v-model="select" :action="action" :fieldOption="fieldOption"></lar-field-select>
                <template slot="code">
                    <code v-text='`
                        <lar-field-select v-model="boole" :action="action" :fieldOption="fieldOption"></lar-field-select>
                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    值:{{remoteSelect}} <br />远程下拉
                </template>
                <lar-field-select v-model="remoteSelect" :action="action" :fieldLink="selectLink"></lar-field-select>
                <template slot="code">
                    <pre>
                    <code v-text='`
                         其中fieldLink中存储了链表的相关信息
                            "url":"http://test.54blues.com/api/manager/address/address?pageSize=10&page=1",  //获取数据的地方
                            "select": ["id","id","name"],       //展示哪些字段,第一个为key.
                            "show": "edit\\/shop.shop\\/{{id}}"  //关联展示详情的地方
                         <lar-field-select v-model="remoteSelect" :action="action" :fieldLink="selectLink"></lar-field-select>

                     `'></code>
                     </pre>
                </template>
            </lar-ui-tutorial>



            <lar-ui-tutorial>
                <template slot="header">
                    值:{{remoteMSelect}} <br />远程下拉,多选
                </template>
                <lar-field-select v-model="remoteMSelect" fieldMulti="true" :action="action" :fieldLink="selectLink"></lar-field-select>
                <template slot="code">
                    <code v-text='`
                         其中fieldLink中存储了链表的相关信息
                        <lar-field-select v-model="remoteMSelect" fieldMulti="true" :action="action" :fieldLink="selectLink"></lar-field-select>

                     `'></code>
                </template>
            </lar-ui-tutorial>




            <lar-ui-tutorial>
                <template slot="header">
                    值:{{remoteMSelect}} <br />远程下拉,多选
                </template>
                <lar-field-editor v-model="editor" ></lar-field-editor>
                <template slot="code">
                    <code v-text='`
                         其中fieldLink中存储了链表的相关信息
                        <lar-field-select v-model="remoteMSelect" fieldMulti="true" :action="action" :fieldLink="selectLink"></lar-field-select>

                     `'></code>
                </template>
            </lar-ui-tutorial>



            <lar-ui-tutorial>
                <template slot="header">
                    textarea:{{input}} <br />
                </template>
                <lar-field-textarea v-model="input"  :action="action" ></lar-field-textarea>
                <template slot="code">
                    <code v-text='`
                         其中fieldLink中存储了链表的相关信息
                        <lar-field-textarea v-model="input"  :action="action" ></lar-field-textarea>

                     `'></code>
                </template>
            </lar-ui-tutorial>


            <lar-ui-tutorial>
                <template slot="header">
                    number:{{input}} <br />
                </template>
                <lar-field-number v-model="input"  :action="action" ></lar-field-number>
                <template slot="code">
                    <code v-text='`
                         其中fieldLink中存储了链表的相关信息
                          <lar-field-number v-model="input"  :action="action" ></lar-field-number>

                     `'></code>
                </template>
            </lar-ui-tutorial>


        </lar-ui-plane>
    </div>



</template>
<script>
    export default {
        data() {
            return {
                boole:true,
                action:'edit',
                input:'测试值',
                time:'2018-05-05 20:00:00',
                timestamp:'1527844587',
                date:'2018-05-05',
                datetime:'2018-05-05 20:00:00',
                img:'',
                imgs:[],
                imgurl:'https://www.baidu.com/img/baidu_jgylogo3.gif',
                imgData:{'img_big':{},'img_small':{}},
                select:2,
                remoteSelect:'',
                remoteMSelect:'',
                selectLink:{
                    "url":"http://vue.lar/api/manager/address/city?pageSize=50&page=1",
                    "select": ["id", "name"],
                    // "show": "edit\/address.city\/{{id}}"//展示的时候,用来关联
                },
                fieldOption:{
                    '测试':'测试',
                    2:'测试2',
                },
                editor:'<b>测试</b>',

            }
        }
    }
</script>
<style>
</style>